<link href="css/smartWizard/smart_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/smartWizard/jquery.smartWizard-2.0.min.js"></script>
<style type="text/css" >
    .stepDesc {
        font-size: 12px !important;
    }

    .dataTables_filter {
        display: none;
    }
</style>
<div class="container_16">
    <div class="push_1 grid_12 containerHeight">
        <form action="backend/prestamo/prestamo/generarPrestamo" id="formPrestamo" method="post">
            <div id="wizard" class="swMain">
                <ul>
                    <li><a href="#step-1">
                            <label class="stepNumber">1</label>
                            <span class="stepDesc"><?= lang('datosPrestamo') ?></span>
                        </a></li>
                    <li><a href="#step-2">
                            <label class="stepNumber">2</label>
                            <span class="stepDesc"><?= lang('escogerCuenta') ?></span>
                        </a></li>
                    <li><a href="#step-3">
                            <label class="stepNumber">3</label>
                            <span class="stepDesc"><?= lang('confirmacionDatos') ?></span>
                        </a></li>
                </ul>

                <div id="step-1">
                    <h2 class="StepTitle"><?= lang('datosPrestamo') ?></h2>
                    <table>
                        <tr>
                            <td><?= lang('finalidadPrestamo') ?>:</td>
                            <td>
                                <select name="cboFinalidad" id="finalidad" tabindex="1">
                                    <option value="0" selected=""><?= lang('escoger') ?></option>
                                    <?php foreach ($finalidad as $fin): ?>
                                        <option value="<?= $fin->id ?>"><?= lang($fin->tag) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><?= lang('importeSolicitado') ?>:<br/>(min: 1000&euro;)</td>
                            <td><input name="txtImporte" id="txtImporte" type="text" size="10" tabindex="2"/>&euro;</td>
                        </tr>
                        <tr>
                            <td><?= lang('introducirCuotaPlazo') ?></td>
                            <td>
                                <table>
                                    <tr>
                                        <td><input type="radio" name="radioTipo" tabindex="3"/><?= lang('cuotaMensual') ?></td>
                                        <td><input id="txtCuota" name="txtCuota" type="text" tabindex="4"/>&euro; </td>
                                    </tr>
                                    <tr>
                                        <td><input type="radio" name="radioTipo" tabindex="5"/><?= lang('plazoDevolver') ?></td>
                                        <td><input id="txtPlazo" name="txtPlazo" type="text" size="3" tabindex="6"/>
                                            <select name="cboTipoPlazo" id="cboTipoPlazo" tabindex="7">
                                                <option value="anos"><?= lang('anos') ?></option>
                                                <option value="meses"><?= lang('meses') ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                </table>
                    </table>
                </div>
                <div id="step-2">
                    <h2 class="StepTitle"><?= lang('escogerCuenta') ?></h2>
                    <table id="cuentas">
                        <thead>
                            <tr>
                                <td><?= lang('seleccionar') ?></td>
                                <td><?= lang('cuenta') ?></td>
                                <td><?= lang('saldo') ?></td>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($cuentas as $cuenta): ?>
                                <tr>
                                    <td><center><input name="radioCuenta" type="radio" value="<?= $cuenta->id ?>"></center></td>
                            <td><?= $cuenta->codigoEntidad . ' - ' . $cuenta->codigoOficina . ' - ' . $cuenta->codigoControl . ' - ' . $cuenta->codigoCuenta ?></td>
                            <td style="float:right"><?= number_format($cuenta->saldo, 2, ',', '.') ?>&euro;</td>
                            </tr>
                        <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                <div id="step-3">
                    <h2 class="StepTitle"><?= lang('confirmacionDatos') ?></h2>
                    <center>
                        <table id="datosConfirmacion" style="margin-top: 20px">
                            <tbody>
                                <tr>
                                    <th style="float: left"><?= lang('finalidadPrestamo') ?></th>
                                    <td><input id="txtFinalidadConf" type="text" size="50" disabled/></td>
                                </tr>
                                <tr>
                                    <th style="float: left"><?= lang('importeSolicitado') ?></th>
                                    <td><input id="txtImporteConf" type="text" size="10" disabled/></td>
                                </tr>
                                <tr>
                                    <th style="float: left"></th>
                                    <td><input id="txtCuotaPlazoConf" type="text" size="10" disabled/></td>
                                </tr>
                                <tr>
                                    <th style="float: left"><?= lang('cuenta') ?></th>
                                    <td><input id="txtCuentaConf" type="text" size="25" disabled/></td>
                                </tr>
                            </tbody>
                        </table>
                    </center>
                    <input id="acuerdo" type="checkbox"/><?= lang('acuerdoDatos') ?>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" >
    $(document).ready(function () {
        $('#wizard').smartWizard({
            onLeaveStep:leaveAStepCallback,
            onFinish: onFinishCallback,  // triggers when Finish button is clicked
            labelNext:'<?= lang('siguiente') ?>', // label for Next button
            labelPrevious:'<?= lang('anterior') ?>', // label for Previous button
            labelFinish:'<?= lang('finalizar') ?>'  // label for Finish button
        });

        $('#cuentas').dataTable({
            "bJQueryUI":true,
            "bInfo":false,
            "bSort":false,
            "bPaginate":false,
            "oLanguage": {
                "sUrl": "<?= lang('datatables_lng') ?>"
            }
        });

        function leaveAStepCallback(obj) {
            var step_num = obj.attr('rel');
            return validateSteps(step_num);
        };

        function onFinishCallback() {
            if (validateSteps('3')) {
                $('#formPrestamo').submit();
            }
        };

        function validateSteps(step) {
            var isStepValid = true;
            // validate step 1
            if (step == 1) {
                if (validateStep1() == false) {
                    isStepValid = false;
                    $('#wizard').smartWizard('showMessage', '<?= lang('corrijaError1') ?>' + step + '<?= lang('corrijaError2') ?>');
                    $('#wizard').smartWizard('setError', {stepnum:step, iserror:true});
                } else {
                    $('#wizard').smartWizard('setError', {stepnum:step, iserror:false});
                }
            }
            else if(step == 2){
                if (validateStep2() == false){
                    isStepValid = false;
                    $('#wizard').smartWizard('showMessage', '<?= lang('corrijaError1') ?>' + step + '<?= lang('corrijaError2') ?>');
                    $('#wizard').smartWizard('setError', {stepnum:step, iserror:true});
                } else {
                    $('#wizard').smartWizard('setError', {stepnum:step, iserror:false});
                    fillFieldsStep3();
                }
            }
            else if(step== 3){
                if (!acuerdo.checked){
                    isStepValid = false;
                    $('#wizard').smartWizard('showMessage', '<?= lang('corrijaError1') ?>' + step + '<?= lang('corrijaError2') ?>');
                    $('#wizard').smartWizard('setError', {stepnum:step, iserror:true});
                }
            }
            return isStepValid;
        };

        function validateStep1() {
            var isValid = false;
            //que haya escogido una opcion del combo box
            var selectedIndex = (finalidad.options[finalidad.selectedIndex].value);
            if (selectedIndex != 000){
                //que haya puesto un importe
                if (txtImporte.value != '' && parseInt(txtImporte.value) >= 1000){
                    //que haya escogido una cuota o un plazo
                    for (var i = 0; i < formPrestamo.radioTipo.length; i++) {
                        if (formPrestamo.radioTipo[i].checked) {
                            //que haya determinado un valor para las cuotas o los plazos
                            //cuota
                            if (i == 0){
                                if (txtCuota.value != '' && parseInt(txtCuota.value) <= parseInt(txtImporte.value))
                                    isValid = true;
                            }
                            //plazo
                            else{
                                if (txtPlazo.value != '')
                                    isValid = true;
                            }
                        }
                    }
                }
            }
            return isValid;
        };

        function validateStep2(){
            var isValid = false;
            if (formPrestamo.radioCuenta instanceof HTMLInputElement) {
                if (formPrestamo.radioCuenta.checked){
                    isValid = true;
                }
            }
            else {
                for (var i = 0; i < formPrestamo.radioCuenta.length; i++) {
                    if (formPrestamo.radioCuenta[i].checked) {
                        isValid = true;
                    }
                }
            }
            return isValid;
        }

        function fillFieldsStep3(){
            //finalidad
            txtFinalidadConf.value = finalidad.options[finalidad.selectedIndex].text;
            //importe
            txtImporteConf.value = txtImporte.value + ' \u20AC';
            //cuota/plazo
            for (var i = 0; i < formPrestamo.radioTipo.length; i++) {
                if (formPrestamo.radioTipo[i].checked) {
                    //cuota
                    if (i == 0){
                        txtCuotaPlazoConf.value = txtCuota.value + ' \u20AC';
                        $('#datosConfirmacion tbody').children(':eq(2)').children(':eq(0)').text('<?= lang('cuota') ?>');
                    }
                    //plazo
                    else{
                        txtCuotaPlazoConf.value = txtPlazo.value + ' ' + cboTipoPlazo.options[cboTipoPlazo.selectedIndex].text;
                        $('#datosConfirmacion tbody').children(':eq(2)').children(':eq(0)').text('<?= lang('plazos') ?>');
                    }
                }
            }
            //cuenta
            for(var i = 0; i < formPrestamo.radioCuenta.length; i++) {
                if (formPrestamo.radioCuenta[i].checked){
                    txtCuentaConf.value = $('#cuentas tbody').children(':eq(' + i + ')').children(':eq(1)').text();
                }
            }
        };
    });
</script>